<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('天然气系统')" />
</head>
<body class="gray-cg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <!-- 上部按钮 -->
        <div class="row">
            <div class="col-xs-12 text-right">
                <button class="btn btn-large btn-opt" type="button"
                        onclick="handleImportClick()">离线运行数据导入</button>
                <input type="file" id="fileInput" accept=".xls,.xlsx"
                       style="display: none;" onchange="handleFileChange()">
                <button class="btn btn-large btn-opt" type="button">开始参数辨识</button>
                <button class="btn btn-large btn-opt" type="button">参数导出</button>
            </div>
        </div>

        <!-- 中部表格 -->
        <div class="row margin-top">
            <div class="col-xs-12 col-md-6">
                <div class="echarts-title">模型参数</div>
                <div class="echarts-box">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>

            <div class="col-xs-12 col-md-6">
                <div class="title-box">
                    <button class="btn btn-large dp-btn-title" type="button">模型参数</button>
                </div>
                <div class="table-scroll" style="height: 200px;">
                    <table class="dp-table" id="table1"></table>
                </div>
            </div>

        </div>

        <!-- 下部备注 -->
        <div class="row footer footer-box">
            <div class="col-xs-12">
                <div class="footer-title">功能说明</div>
                <div class="footer-content">基于</div>
            </div>
        </div>

    </div>
</div>
</body>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "offline/gas";

    $(function() {
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            tooltip : {
                trigger: 'axis'
            },
            grid:{
                x:40,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'降水量',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };
        barChart.setOption(baroption);

        window.onresize = barChart.resize;

        const options1 = {
            id: 'table1',
            data: [],
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field: 'number',
                    title: '编号',
                    align: 'center',
                },
                {
                    field: 'parameter1',
                    title: '参数1</br>(单位)',
                    align: 'center',
                },
                {
                    field: 'parameter2',
                    title: '参数2</br>(单位)',
                },
            ]
        };
        $.table.init(options1);
    });

    function importExcel() {
        const formData = new FormData();
        const fileInput = document.getElementById('fileInput');
        if (fileInput.files[0] == null) {
            $.modal.alertWarning("请先选择文件路径");
            return false;
        }
        formData.append('file', fileInput.files[0]);

        $.ajax({
            type: "post",
            url: prefix + "/importData",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                console.log(data);
                if (data.code === 0) {
                    const dataMap = data.data;
                    // 刷新表格数据
                    let index = 1;
                    dataMap.forEach((value) => {
                        $('#table' + index).bootstrapTable('load', value || []);
                        index++;
                    });

                    $.modal.msgSuccess("数据导入成功");
                } else {
                    $.modal.msgError('数据导入失败！');
                }
            },
            error: function(xhr, status, error) {
                $.modal.msgError('数据导入失败！');
                console.error('Error:', error);
            }
        });

    }

    function handleImportClick() {
        const fileInput = document.getElementById('fileInput');
        fileInput.click();
    }

    function handleFileChange() {
        importExcel();
    }
</script>
<style type="text/css">
    .echarts-title {
        color: #cbc8a0;
        padding: 10px;
        font-size: 14px;
    }

    .echarts-box {
        background-color: #091221;
    }
</style>
</html>